<template>
	<view class="span-20 bgimg">
		<image :src="`${getApp.globalData.baseImgUrl}/image/home/44_bg.png`" mode="" style="height: 100%;"></image>
		<view class="span-20 data-box d-flex flex-column">
			<view class="data-title d-flex flex-row j-sb a-center">
				<text class="title">数据概况</text>
				<view class="data-date">
					<picker mode="date" :value="start" fields="month" @change="bindDateChange">
						<view class="uni-input">{{start}}</view>
					</picker>
					<view class="iconfont icon-youjiantou"></view>
				</view>
			</view>
			<view class="span-20">
				<view class="d-flex flex-row a-center j-sb pt-2" v-if="dataInfo">
					<view class="flex-1 d-flex flex-column a-center j-center">
						<text class="font-md text-title">销售总额(元)</text>
						<text class="text-value font-lg font-weight-400">{{dataInfo.money}}</text>
					</view>
					<view class="d-flex flex-column a-center j-center" style="width: 235rpx;">
						<text class="font-md text-title">订单数</text>
						<text class="text-value font-lg font-weight-400">{{dataInfo.order}}</text>
					</view>
					<view class="d-flex flex-column a-center j-center" style="width: 235rpx;">
						<text class="font-md text-title">待发货订单</text>
						<text class="text-value font-lg font-weight-400">{{dataInfo.await_ship}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			startDate: String,
			dataInfo: Object
		},
		data() {
			return {
				start: "",
				getApp:""
			}
		},
		watch:{
			startDate:{
				deep: true,
				handler(value){
					this.start = value
				}
			}
		},
		created() {
			this.getApp = getApp()
		},
		methods: {
			bindDateChange(e){
	
				 this.start = e.detail.value
				 this.$emit("changeData",this.start)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgimg {
		height: 315upx;
		position: relative;

		image {
			position: absolute;
			z-index: -1;
		}

		.data-box {
			height: 100%;
			padding: 14rpx 54rpx 60rpx 54rpx;
			color: #fff;

			.data-title {
				border-bottom: 1px solid #F7F9FD;
				padding: 14rpx 0;

				.title {
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.data-date {
					display: flex;
					flex-direction: row;
					align-items: baseline;

					::v-deep .uni-input {
						background: transparent !important;
					}
				}
			}

		}
	}
</style>